<template>
  <div class="container" @contextmenu.prevent.native="handleRightMenu">
    <!-- 顶部标题 -->
    <div class="title-container">
      <div class="title-container-back-btn" @click="handlePageBack">
        <!-- @click="handlePageBack" -->
        <i class="iconfont icon-fanhui"></i>
        <!-- <icon-left style="margin-left: 18px;margin-right: 8px;color: #CCC;" /> -->
        <span>返回</span>
      </div>
      <div class="title-container-content">
        [{{ $route.query.id }}-{{ showTaskName }}] {{ seriesUid }}
      </div>
    </div>
    <!-- 工具栏 -->
    <div class="tool-bar-container">
      <div class="tool-bar-left">
        <div class="query-tool" @click="handleQueryClick(queryVisibile)">查看工具</div>
        <div
          class="query-tool-list"
          ref="queryToolRef"
          :style="{ display: queryVisibile ? 'flex' : 'none' }"
        >
          <div
            class="query-tool-list-item"
            v-for="t in queryList"
            :key="t.id"
            :class="currentItem === t.id ? 'active' : ''"
            @click="handleToolClick(t)"
          >
            <div>
              <div class="icon-box">
                <i :class="`iconfont ${t.name}`"></i>
              </div>
              <div class="label">{{ t.label }}</div>
            </div>
          </div>
        </div>
        <div
          class="mark-tool"
          v-on="{
            click:
              route.query.type === 'create' ? () => handleMarkClick(markVisibile) : null,
          }"
        >
          标注工具
        </div>
        <!-- 标注工具 -->
        <div
          class="mark-tool-list"
          ref="markToolRef"
          :style="{ display: markVisibile ? 'flex' : 'none' }"
        >
          <div
            class="mark-tool-list-item"
            v-for="t in markList"
            :key="t.id"
            :class="currentItem === t.id ? 'active' : ''"
          >
            <a-dropdown class="mark-tool-dropdown" @select="handleToolClick(t, $event)">
              <!-- v-on="{
                select:
                  route.query.type === 'create' ? () => handleToolClick(t, $event) : null,
              }" -->
              <div>
                <div class="icon-box">
                  <i :class="`iconfont ${t.name}`"></i>
                </div>
                <div class="label">{{ t.label }}</div>
              </div>
              <template #content>
                <a-tooltip
                  :content="item?.name"
                  v-for="item in t.lesionList"
                  :key="item.lesion"
                  position="bottom"
                >
                  <a-doption :value="item.lesion" class="drop-item" :disabled="disabled">
                    <div
                      class="drop-item-color"
                      :style="{ backgroundColor: item?.color }"
                    ></div>
                    <div>{{ item?.name }}</div>
                  </a-doption>
                </a-tooltip>
              </template>
            </a-dropdown>
          </div>
        </div>
      </div>
      <div class="tool-bar-right">
        <div class="radio-btn" v-if="radioVisible">
          <div
            :class="radioChecked ? 'active' : ''"
            :style="{ cursor: route.query.type === 'create' ? 'pointer' : 'not-allowed' }"
            v-on="{
              click: route.query.type === 'create' ? () => handleRadioClick(1) : null,
            }"
          >
            阴性
          </div>
          <!-- <div :class="radioChecked === false ? 'active' : ''" @click="handleRadioClick(2)">阳性</div> -->
          <div
            :class="!radioChecked && radioChecked !== undefined ? 'active' : ''"
            :style="{ cursor: route.query.type === 'create' ? 'pointer' : 'not-allowed' }"
            v-on="{
              click: route.query.type === 'create' ? () => handleRadioClick(2) : null,
            }"
          >
            阳性
          </div>
        </div>
        <div class="detail-tool">
          <div
            v-on="{ click: route.query.type === 'create' ? handleMarkDesert : null }"
            :style="{ cursor: route.query.type === 'create' ? 'pointer' : 'not-allowed' }"
          >
            <i class="iconfont icon-feipian"></i>
            <div>标记废片</div>
          </div>
          <div
            v-on="{ click: route.query.type === 'create' ? handleSubmit : null }"
            :style="{ cursor: route.query.type === 'create' ? 'pointer' : 'not-allowed' }"
          >
            <i class="iconfont icon-tijiao"></i>
            <div>提交</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 内容区 -->
    <div class="content-container">
      <div class="left-silder">
        <div
          :class="
            currentSubmenuItem === ''
              ? 'active left-silder-submenu'
              : 'left-silder-submenu'
          "
          @click="handleSubmenuClick(submenuVisibile)"
        >
          <div class="left-silder-submenu-title">
            <div @click="handleAllEyeClick(eyeAllVisibile, $event)">
              <i
                :class="eyeAllVisibile ? 'iconfont icon-biyan1' : 'iconfont icon-biyan'"
              ></i>
            </div>
            <span>病灶列表</span>
          </div>
          <div class="left-silder-submenu-icon">
            <!-- <i
              :class="submenuVisibile ? 'iconfont icon-xiala' : 'iconfont icon-shouqi'"
            ></i> -->
            <i class="iconfont icon-xiala" style="font-size: 7px"></i>
          </div>
        </div>
        <div
          class="left-silder-submenu-item"
          :style="{ display: menuItemVisibile ? 'none' : 'block' }"
        ></div>
        <ul
          class="left-silder-submenu-item"
          :style="{ display: menuItemVisibile ? 'block' : 'none' }"
        >
          <li
            v-for="item in showLesionList"
            :key="item?.disease.lesion"
            :class="
              currentSubmenuItem === item?.disease.id
                ? 'left-silder-submenu-item-li active'
                : 'left-silder-submenu-item-li'
            "
            @click="handleSubmenuItemClick(item)"
          >
            <div class="left-silder-submenu-item-title">
              <div @click="handleEyeClick(item, $event)">
                <i
                  :class="
                    item?.disease.eyeStatus
                      ? 'iconfont icon-biyan1'
                      : 'iconfont icon-biyan'
                  "
                ></i>
              </div>
              <a-tooltip
                :content="item?.disease.name + '_' + item?.disease.id"
                position="bottom"
              >
                <div class="left-silder-submenu-item-title-content">
                  {{ item?.disease.name + "_" + item?.disease.id }}
                </div>
              </a-tooltip>
            </div>
            <div
              class="left-silder-submenu-item-icon"
              :style="{ display: route.query.type === 'create' ? 'flex' : 'none' }"
            >
              <div
                class="left-silder-submenu-item-icon-color"
                :style="{ backgroundColor: item?.disease.color }"
              >
                <el-color-picker
                  v-model="item.disease.color"
                  @change="handleColorChange(item, $event)"
                  size="small"
                ></el-color-picker>
              </div>
              <!-- <el-color-picker v-model="item.disease.color" @change="handleColorChange" class="left-silder-submenu-item-icon-color" size="small"></el-color-picker> -->
              <!-- <Sketch v-model="item.disease.colorBlock" :show="showSketch" @changeButton="handleSketchButton"></Sketch> -->
              <div
                class="left-silder-submenu-item-icon-del"
                @click="handleDelClick(item, $event)"
              >
                <i class="iconfont icon-shanchu"></i>
              </div>
            </div>
          </li>
        </ul>
        <div class="left-silder-bottom-tip">
          <div class="left-silder-bottom-tip-title">
            <span class="left-silder-bottom-tip-title-circle"></span>
            <span class="left-silder-bottom-tip-title-content">小提示</span>
          </div>
          <div class="left-silder-bottom-tip-content">
            按住鼠标左键移动以缩放图像 按住鼠标右键移动以移动图像
          </div>
        </div>
      </div>
      <div class="content" @mousemove="handleMouseMove">
        <!-- 倍率条 -->
        <div class="content-multiplying-bar">
          <div class="content-multiplying-bar-title">{{ multiplying }}X</div>
          <div class="content-multiplying-bar-list">
            <div
              class="content-multiplying-bar-list-item"
              @click="handleMagnification(40)"
            >
              40
            </div>
            <div
              class="content-multiplying-bar-list-item"
              @click="handleMagnification(20)"
            >
              20
            </div>
            <div
              class="content-multiplying-bar-list-item"
              @click="handleMagnification(10)"
            >
              10
            </div>
            <div
              class="content-multiplying-bar-list-item"
              @click="handleMagnification(4)"
            >
              4
            </div>
            <div
              class="content-multiplying-bar-list-item"
              @click="handleMagnification(2)"
            >
              2
            </div>
            <div
              class="content-multiplying-bar-list-item"
              @click="handleMagnification(1)"
            >
              1
            </div>
          </div>
        </div>
        <!-- 位置条 -->
        <div class="content-mouse-positon">{{ mouseString }}</div>
        <div class="content-viewer-container" id="content-viewer-container">
          <div ref="viewerRef" id="viewer" style="width: 100%; height: 100%"></div>
          <!-- <canvas id="canvas" width="100%" height="600" style="border: 1px solid #ccc;"></canvas> -->
        </div>
        <!-- <div class="content-thumbnail">缩略图</div> -->
      </div>
      <!-- <canvas id="c" width="400" height="300" style="border:1px solid #ccc"></canvas> -->
      <div class="right-slider">
        <!-- 特殊部分处理 -->
        <div class="right-slider-special" v-if="findingVisible || diagnosisVisible">
          <!-- 检查所见模块 -->
          <div v-if="findingVisible" class="right-slider-special-item">
            <div class="right-slider-special-title">检查所见：</div>
            <div class="right-slider-special-text">{{ findingValue }}</div>
          </div>
          <!-- 诊断所得模块 -->
          <div
            v-if="diagnosisVisible"
            class="right-slider-special-item"
            :style="{ marginTop: findingVisible ? '16px' : '0px' }"
          >
            <div class="right-slider-special-title">诊断所得：</div>
            <div class="right-slider-special-text">{{ diagnosisValue }}</div>
          </div>
        </div>
        <!-- 序列征象处理（大征象） -->
        <div class="right-slider-list" v-show="currentSubmenuItem === ''">
          <!-- <div v-for="(value, name, index) in seriesSettings"> -->
          <div class="right-slider-list-title">序列征象</div>
          <div class="right-slider-list-content">
            <a-form
              :model="seriesSettings.form"
              ref="seriesSetFormRef"
              label-align="left"
            >
              <div v-for="t in seriesSettings?.formOptions" :key="t?.id">
                <a-form-item
                  class="mjor-sign-input"
                  v-if="t?.type === 'text'"
                  :label="t?.title"
                  :field="t?.field"
                  :required="t?.required"
                >
                  <template #label>
                    <a-tooltip :content="t?.title" position="bottom">
                      <span>{{ t?.title }}</span>
                    </a-tooltip>
                  </template>
                  <a-textarea
                    v-model="seriesSettings.form[String(t?.field)]"
                    :disabled="disabled"
                    allow-clear
                    @change="handleChange($event, t, 1)"
                  />
                </a-form-item>
                <a-form-item
                  class="mjor-sign-select"
                  v-if="t?.type === 'select'"
                  :label="t?.title"
                  :field="t?.field"
                  :required="t?.required"
                >
                  <template #label>
                    <a-tooltip :content="t?.title" position="bottom">
                      <span>{{ t?.title }}</span>
                    </a-tooltip>
                  </template>
                  <a-select
                    placeholder="请选择"
                    allow-clear
                    v-model="seriesSettings.form[String(t?.field)]"
                    :disabled="disabled"
                    @change="handleChange($event, t, 1)"
                  >
                    <a-option v-for="it in t?.data" :key="it?.value" :value="it?.value">{{
                      it?.label
                    }}</a-option>
                  </a-select>
                </a-form-item>
                <a-form-item
                  class="mjor-sign-cascader"
                  v-if="t?.type === 'child_select'"
                  :label="t?.title"
                  :field="t?.field"
                  :required="t?.required"
                >
                  <template #label>
                    <a-tooltip :content="t?.title" position="bottom">
                      <span>{{ t?.title }}</span>
                    </a-tooltip>
                  </template>
                  <a-cascader
                    v-model="seriesSettings.form[String(t?.field)]"
                    path-mode
                    :options="t?.data"
                    :disabled="disabled"
                    placeholder="请选择"
                    allow-clear
                    @change="handleChange($event, t, 1)"
                  />
                </a-form-item>
                <a-form-item
                  class="mjor-sign-radio"
                  v-if="t?.type === 'radiobox'"
                  :label="t?.title"
                  :field="t?.field"
                  :required="t?.required"
                >
                  <template #label>
                    <a-tooltip :content="t?.title" position="bottom">
                      <span>{{ t?.title }}</span>
                    </a-tooltip>
                  </template>
                  <a-radio-group
                    v-model="seriesSettings.form[String(t?.field)]"
                    :disabled="disabled"
                    @change="handleChange($event, t, 1)"
                  >
                    <a-grid :cols="3" :colGap="24" :rowGap="16">
                      <a-grid-item v-for="it in t?.data" :key="it?.value">
                        <a-radio :value="it?.value">{{ it?.label }}</a-radio>
                      </a-grid-item>
                    </a-grid>
                  </a-radio-group>
                </a-form-item>
                <a-form-item
                  class="mjor-sign-checkbox"
                  v-if="t?.type === 'checkbox'"
                  :label="t?.title"
                  :field="t?.field"
                  :required="t?.required"
                >
                  <template #label>
                    <a-tooltip :content="t?.title" position="bottom">
                      <span>{{ t?.title }}</span>
                    </a-tooltip>
                  </template>
                  <a-checkbox-group
                    v-model="seriesSettings.form[String(t?.field)]"
                    :disabled="disabled"
                    @change="handleChange($event, t, 1)"
                  >
                    <a-grid :cols="3" :colGap="24" :rowGap="16">
                      <a-grid-item v-for="it in t?.data" :key="it?.value">
                        <a-checkbox :value="it?.value">{{ it?.label }}</a-checkbox>
                      </a-grid-item>
                    </a-grid>
                  </a-checkbox-group>
                </a-form-item>
              </div>
            </a-form>
          </div>
          <!-- </div> -->
        </div>
        <!-- 标注征象处理（小征象） -->
        <div class="right-slider-list" v-show="currentSubmenuItem !== ''">
          <!-- <div v-for="item in currentMiniSeriesSet"> -->
          <div class="right-slider-list-title">标注征象</div>
          <div class="right-slider-list-content">
            <a-form
              :model="currentMiniSeriesSet.form"
              ref="mjorSignsFormRef"
              :id="currentSubmenuItem"
              label-align="left"
            >
              <div v-for="t in currentMiniSeriesSet?.formOptions" :key="t?.id">
                <a-form-item
                  class="mjor-sign-input"
                  v-if="t?.type === 'text'"
                  :label="t?.title"
                  :field="t?.field"
                  :required="t?.required"
                >
                  <template #label>
                    <a-tooltip :content="t?.title" position="bottom">
                      <span>{{ t?.title }}</span>
                    </a-tooltip>
                  </template>
                  <a-textarea
                    v-model="currentMiniSeriesSet.form[String(t?.field)]"
                    :disabled="disabled"
                    allow-clear
                    @change="handleChange($event, t, 2, currentSubmenuItem)"
                  />
                </a-form-item>

                <a-form-item
                  class="mjor-sign-select"
                  v-if="t?.type === 'select'"
                  :label="t?.title"
                  :field="t?.field"
                  :required="t?.required"
                >
                  <template #label>
                    <a-tooltip :content="t?.title" position="bottom">
                      <span>{{ t?.title }}</span>
                    </a-tooltip>
                  </template>
                  <a-select
                    placeholder="请选择"
                    allow-clear
                    v-model="currentMiniSeriesSet.form[String(t?.field)]"
                    :disabled="disabled"
                    @change="handleChange($event, t, 2, currentSubmenuItem)"
                  >
                    <a-option v-for="it in t?.data" :key="it?.value">{{
                      it?.label
                    }}</a-option>
                  </a-select>
                </a-form-item>
                <a-form-item
                  class="mjor-sign-cascader"
                  v-if="t?.type === 'child_select'"
                  :label="t?.title"
                  :field="t?.field"
                  :required="t?.required"
                >
                  <template #label>
                    <a-tooltip :content="t?.title" position="bottom">
                      <span>{{ t?.title }}</span>
                    </a-tooltip>
                  </template>
                  <a-cascader
                    v-model="currentMiniSeriesSet.form[String(t?.field)]"
                    path-mode
                    :options="t?.data"
                    :disabled="disabled"
                    placeholder="请选择"
                    allow-clear
                    @change="handleChange($event, t, 2, currentSubmenuItem)"
                  />
                </a-form-item>
                <a-form-item
                  class="mjor-sign-radio"
                  v-if="t?.type === 'radiobox'"
                  :label="t?.title"
                  :field="t?.field"
                  :required="t?.required"
                >
                  <template #label>
                    <a-tooltip :content="t?.title" position="bottom">
                      <span>{{ t?.title }}</span>
                    </a-tooltip>
                  </template>
                  <a-radio-group
                    v-model="currentMiniSeriesSet.form[String(t?.field)]"
                    :disabled="disabled"
                    @change="handleChange($event, t, 2, currentSubmenuItem)"
                  >
                    <a-grid :cols="3" :colGap="24" :rowGap="16">
                      <a-grid-item v-for="it in t?.data" :key="it?.value">
                        <a-radio :value="it?.value">{{ it?.label }}</a-radio>
                      </a-grid-item>
                    </a-grid>
                  </a-radio-group>
                </a-form-item>
                <a-form-item
                  class="mjor-sign-checkbox"
                  v-if="t?.type === 'checkbox'"
                  :label="t?.title"
                  :field="t?.field"
                  :required="t?.required"
                >
                  <template #label>
                    <a-tooltip :content="t?.title" position="bottom">
                      <span>{{ t?.title }}</span>
                    </a-tooltip>
                  </template>
                  <a-checkbox-group
                    v-model="currentMiniSeriesSet.form[String(t?.field)]"
                    :disabled="disabled"
                    @change="handleChange($event, t, 2, currentSubmenuItem)"
                  >
                    <a-grid :cols="3" :colGap="24" :rowGap="16">
                      <a-grid-item v-for="it in t?.data" :key="it?.value">
                        <a-checkbox :value="it?.value">{{ it?.label }}</a-checkbox>
                      </a-grid-item>
                    </a-grid>
                  </a-checkbox-group>
                </a-form-item>
              </div>
            </a-form>
          </div>
          <!-- </div> -->
        </div>
      </div>
    </div>
    <!-- 标记废片弹窗 -->
    <Dialog
      :visible="markScrapVisible"
      :title="'标记废片'"
      :width="502"
      :maskClosable="false"
      :isForm="true"
      :modalClass="'mark-scrap-dialog'"
      :okText="'提交'"
      @update:visible="handleMarkScrapVisible"
    >
      <template v-slot>
        <div class="radio-container">
          <div class="radio-title">请选择该切片标为废片的原因</div>
          <div class="radio-group">
            <a-radio-group v-model="scrapValue">
              <a-radio
                class="radio-group-item"
                v-for="item in scrapList"
                :key="item.value"
                :value="item.value"
                >{{ item.name }}</a-radio
              >
            </a-radio-group>
          </div>
          <div class="other-container">
            <a-textarea
              v-model="discardRemark"
              :auto-size="{ minRows: 2, maxRows: 2 }"
              :max-length="200"
              placeholder="请输入其他废片原因（选填）"
            ></a-textarea>
          </div>
        </div>
      </template>
    </Dialog>
    <!-- 提交最终结果弹窗 -->
    <a-modal
      :visible="submitVisible"
      :title="'提交'"
      :width="502"
      :mask-closable="false"
      :modal-class="'submit-dialog'"
      :footer="false"
      @cancel="handleCancel"
    >
      <div>
        <div class="sumbit-body">
          <div class="submit-title">确定提交该切片吗？</div>
          <div class="submit-tip">提交后切片将不再修改</div>
        </div>
        <div class="bottom-btn">
          <a-button
            type="primary"
            class="left-btn"
            @click="handleSubmitVisible({ status: 'more', flag: false })"
            >提交获取新切片</a-button
          >
          <a-button
            type="primary"
            class="right-btn"
            @click="handleSubmitVisible({ status: 'save', flag: false })"
            >提交并关闭</a-button
          >
        </div>
      </div>
    </a-modal>
    <!-- <Dialog
            :visible="submitVisible" 
            :title="'提交'" 
            :width="502"
            :maskClosable="false"
            :isForm="true"
            :modalClass="'submit-dialog'"
            :okText="'提交并关闭'"
            :cancelText="'提交获取新切片'"
            :cancelBtnType="'primary'"
            @update:visible="handleSubmitVisible"
        >
            <template v-slot>
                <div>
                    <div class="submit-title">确定提交该切片吗？</div>
                    <div class="submit-tip">提交后切片将不再修改</div>
                </div>
            </template>
        </Dialog> -->
    <!-- 当前已经没有新切片的弹窗 -->
    <Dialog
      :visible="sectionVisible"
      :title="'提示'"
      :width="502"
      :maskClosable="false"
      :isForm="true"
      :hideCancel="true"
      :modalClass="'section-dialog'"
      :okText="'确认'"
      @update:visible="handleSectionVisible"
    >
      <template v-slot>
        <div>
          <div class="submit-title">
            <i class="iconfont icon-jingshi_" style="color: #ff7d00; font-size: 18px"></i>
            已没有新切片，请确认后退出该标注任务
          </div>
          <!-- <div class="submit-tip">提交后切片将不再修改</div> -->
        </div>
      </template>
    </Dialog>
  </div>
</template>

<script lang="ts" setup>
// @ts-nocheck
import { ref, reactive, onMounted } from "vue";
import { useRoute } from "vue-router";
// import "@/utils/openseadragon-fabricjs-overlay";
import Dialog from "@/components/dialog/index.vue";
import usePageBack from "./hooks1/usePageBack";
import useQueryToolItem from "./hooks1/useQueryToolItem";
import useMarkToolItem from "./hooks1/useMarkToolItem";
import useToolBarRadio from "./hooks1/useToolBarRadio";
import useToolBar from "./hooks1/useToolBar";
import useToolBarRight from "./hooks1/useToolBarRight";
import useContent from "./hooks1/useContent";
import useContentRightSlider from "./hooks1/useContentRightSlide";
import useSigns from "./hooks1/useSigns";
import type * as Type from "@/api/readPathology/readPathology.d";
import type * as Temp from "./hooks1/type";
// import '@/mock';

const route = useRoute();

const disabled = ref(false);

route.query.type !== "create" && (disabled.value = true);

// 设置初始标注序列用于点击提交时的后续操作
const arListData = ref<Type.ArItem[] | null>([]);

window.frabicCanvas = null;

// 工具栏相关属性及事件
const { currentItem } = useToolBar();

// 左侧列表当前选中属性
const currentSubmenuItem = ref("");

// 返回按钮点击
const { handlePageBack } = usePageBack();

// 查看工具栏相关属性及事件
const { queryList, queryVisibile, queryToolRef, handleQueryClick } = useQueryToolItem();

// 标注工具栏相关属性及事件
const { markList, markVisibile, markToolRef, handleMarkClick } = useMarkToolItem();

// 阴阳性单选按钮属性及事件
const { radioChecked, radioVisible, handleRadioClick } = useToolBarRadio(arListData);

// 病灶列表数据
const showLesionList = ref<Temp.NidusList[]>([]);

// 中间右面征象部分
const {
  findingVisible,
  findingValue,
  diagnosisVisible,
  diagnosisValue,
  seriesSettings,
  currentMiniSeriesSet,
  seriesSetFormRef,
  mjorSignsFormRef,
} = useContentRightSlider();

// 工具栏最右侧弹窗操作
const {
  markScrapVisible,
  submitVisible,
  sectionVisible,
  scrapList,
  scrapValue,
  discardRemark,
  handleMarkDesert,
  handleSubmit,
  handleMarkScrapVisible,
  handleSubmitVisible,
  handleSectionVisible,
} = useToolBarRight(
  radioVisible,
  radioChecked,
  seriesSetFormRef,
  mjorSignsFormRef,
  currentMiniSeriesSet,
  currentSubmenuItem,
  showLesionList,
  arListData
);

// 中间部分
const {
  viewerRef,
  viewer,
  multiplying,
  handleToolClick,
  handleMagnification,
  menuItemVisibile,
  eyeAllVisibile,
  handleEyeClick,
  handleAllEyeClick,
  handleDelClick,
  handleColorChange,
  fabricToolCanvas,
  fabricCanvas,
  getActualNum,
  handleChange,
  getInitData,
  showTaskName,
  seriesUid,
  mouseString,
  handleMouseMove,
} = useContent(
  radioVisible,
  scrapValue,
  radioChecked,
  seriesSettings,
  findingVisible,
  findingValue,
  diagnosisVisible,
  diagnosisValue,
  markList,
  arListData,
  currentItem,
  showLesionList,
  currentSubmenuItem,
  currentMiniSeriesSet
);

const {
  submenuVisibile,
  handleSubmenuClick,
  //   menuItemVisibile,
  handleSubmenuItemClick,
} = useSigns(
  currentMiniSeriesSet,
  viewer,
  fabricCanvas,
  getActualNum,
  currentSubmenuItem,
  getInitData
);

// 右键菜单
const handleRightMenu = (e: any) => {
  return false;
};

// 提交弹窗右上角×关闭
const handleCancel = () => {
  submitVisible.value = false;
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .right-menu {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    width: 200px;
    height: 200px;
    background-color: #fff;
  }
}
.title-container {
  width: 100%;
  // height: 40px;
  background-color: #192c39;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  &-back-btn {
    color: #ccc;
    user-select: none;
    i {
      margin-left: 18px;
      margin-right: 8px;
    }
    span {
      font-weight: 400;
      font-size: 16px;
    }
  }
  &-back-btn:hover {
    cursor: pointer;
  }
  &-content {
    padding: 11px 0;
    font-weight: 400;
    font-size: 14px;
    color: #ccc;
    flex: 1;
    text-align: center;
    margin-top: 1.91px;
  }
}
.tool-bar-container {
  width: 100%;
  height: 54px;
  padding: 4px 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #111e26;
  .tool-bar-left {
    display: flex;
    align-items: center;
    .query-tool,
    .mark-tool {
      width: 52px;
      padding: 10px 12px 12px;
      background-color: rgba(255, 255, 255, 0.08);
      font-weight: 400;
      font-size: 12px;
      line-height: 16px;
      color: #cedee0;
      display: flex;
      align-items: center;
      position: relative;
      user-select: none;
    }
    .mark-tool {
      margin-left: 16px;
    }
    .query-tool::after,
    .mark-tool::after {
      content: "";
      width: 8px;
      height: 8px;
      background-color: #111e26;
      transform: rotate(45deg);
      position: absolute;
      right: -4px;
      top: calc(50% - 4px);
    }
    .query-tool:hover,
    .mark-tool:hover {
      cursor: pointer;
      user-select: none;
      color: #13fffb;
    }
    .query-tool-list,
    .mark-tool-list {
      align-items: center;
      justify-content: flex-start;
      color: #cedee0;
      transition: all 1s;
      &-item {
        width: 56px;
        height: 53px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        user-select: none;
        .icon-box {
          width: 30px;
          height: 30px;
          line-height: 30px;
          margin: 0 auto;
          border-radius: 4px;
          i {
            font-size: 30px;
          }
        }
        .label {
          margin-top: 2px;
        }
      }
      &-item:hover {
        .icon-box {
          background: #28353c;
        }
        .label {
          color: #cedee0;
          margin-top: 2px;
        }
      }
      &-item.active {
        .icon-box {
          background: #074452;
          box-shadow: inset 0px 0px 4px rgba(19, 255, 251, 0.15);
        }
        .label {
          color: #13fffb;
          margin-top: 2px;
        }
      }
    }
  }
  .tool-bar-right {
    display: flex;
    align-items: center;
    justify-content: center;
    .radio-btn {
      border: 1px solid #8ea7b2;
      border-radius: 2px;
      display: flex;
      margin-right: 8px;
      div {
        width: 40px;
        height: 27px;
        font-weight: 400;
        font-size: 12px;
        line-height: 27px;
        color: #cedee0;
        text-align: center;
        user-select: none;
      }
      div.active {
        background: #074452;
        color: #13fffb;
      }
    }
    .radio-btn:hover {
      cursor: pointer;
    }
    .detail-tool {
      font-weight: 400;
      font-size: 12px;
      line-height: 16px;
      color: #cedee0;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      user-select: none;
      padding-left: 8px;
      border-left: 1px solid rgba(255, 255, 255, 0.16);
    }
    .detail-tool > div {
      text-align: center;
      margin-right: 18px;
    }
    .detail-tool > div:hover {
      cursor: pointer;
    }
    .detail-tool > div > i {
      color: #faad14;
      font-size: 30px;
    }
    .detail-tool > div > div {
      margin-top: 2px;
    }
  }
}
.content-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: calc(100% - 94px);
  .left-silder {
    min-width: 180px;
    max-width: 180px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(180deg, #0c1a21 0%, #192c38 100%);
    display: flex;
    flex-direction: column;
    &-submenu {
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      color: #ccc;
      &-title {
        font-weight: 400;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        span {
          margin-left: 6px;
          font-weight: 400;
          font-size: 14px;
        }
      }
    }
    &-submenu.active,
    &-submenu-item-li.active {
      // color: #FFF;
      color: #13fffb;
      background-color: #28353c;
    }
    &-submenu:hover {
      cursor: pointer;
    }
    &-submenu-item {
      margin: 0;
      padding: 0;
      // flex: 9;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      &-li {
        color: #ccc;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        border-bottom: 1px solid #000;
      }
      &-li:hover {
        background-color: #28353c;
        color: #fff;
        cursor: pointer;
      }
      &-title {
        width: 70%;
        font-weight: 400;
        font-size: 12px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        &-content {
          margin-left: 6px;
          display: inline-block;
          width: 100%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
      &-icon {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-left: 8px;
        &-color {
          width: 10px;
          height: 10px;
          margin-right: 10px;
          margin-top: 2px;
          :deep(.el-color-picker--small) {
            height: 10px;
            .el-color-picker__trigger {
              width: 10px;
              height: 10px;
              margin-right: 10px;
              display: block;
              border: 0;
              opacity: 0;
            }
          }
        }

        &-color:hover,
        &-del:hover {
          cursor: pointer;
        }
        &-del:hover {
          color: #67c9d5;
        }
        &-del {
          .iconfont {
            font-size: 12px;
          }
        }
      }
    }
    &-submenu-item::-webkit-scrollbar-track {
      background-color: #f5f5f5;
      --webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.22);
    }
    &-submenu-item::-webkit-scrollbar {
      width: 6px;
      background-color: rgba(40, 49, 66, 0.6);
    }
    &-submenu-item::-webkit-scrollbar-thumb {
      background-color: #8b8b8b;
      border-radius: 10px;
    }
    &-bottom-tip {
      // flex: 1;
      padding: 12px;
      border-top: 1px solid #000;
      height: 132px;
      min-height: 132px;
      max-height: 132px;
      &-title {
        display: flex;
        align-items: center;
        &-circle {
          display: inline-block;
          width: 4px;
          height: 4px;
          background-color: #f7bc5a;
          border-radius: 50%;
        }
        &-content {
          font-weight: 400;
          font-size: 12px;
          color: #f7bc5a;
          margin-left: 4px;
        }
      }
      &-content {
        margin-top: 4px;
        font-weight: 400;
        font-size: 12px;
        line-height: 22px;
        color: #ccc;
      }
    }
  }
  .content {
    width: 100%;
    height: 100%;
    flex: 3;
    background: #000;
    padding: 8px 8px 0;
    position: relative;
    // 位置条
    &-mouse-positon {
      width: 200px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      position: absolute;
      left: 8px;
      top: 8px;
      background-color: rgba(40, 49, 66, 0.6);
      border-radius: 4px;
      z-index: 1;
      color: #fff;
    }
    // 倍率条
    &-multiplying-bar {
      width: 44px;
      height: 284px;
      background-color: rgba(40, 49, 66, 0.6);
      border-radius: 4px;
      position: absolute;
      top: 8px;
      right: 8px;
      padding: 12px 5px 0;
      z-index: 1;
      &-title {
        font-weight: 600;
        font-size: 18px;
        color: #70e2f0;
        margin-bottom: 12px;
        text-align: center;
      }
      &-list {
        &-item {
          width: 32px;
          height: 32px;
          border-radius: 50%;
          border: 1px solid #fff;
          font-weight: 500;
          font-size: 16px;
          line-height: 32px;
          text-align: center;
          color: #fff;
          margin-bottom: 8px;
          user-select: none;
        }
        &-item:nth-of-type(1) {
          color: rgba(255, 174, 224, 0.8);
          border-color: rgba(255, 174, 224, 0.8);
        }
        &-item:nth-of-type(2) {
          color: rgba(255, 185, 255, 0.8);
          border-color: rgba(255, 185, 255, 0.8);
        }
        &-item:nth-of-type(3) {
          color: rgba(229, 201, 255, 0.8);
          border-color: rgba(229, 201, 255, 0.8);
        }
        &-item:nth-of-type(4) {
          color: rgba(202, 215, 255, 0.8);
          border-color: rgba(202, 215, 255, 0.8);
        }
        &-item:nth-of-type(5) {
          color: rgba(153, 240, 255, 0.8);
          border-color: rgba(153, 240, 255, 0.8);
        }
        &-item:nth-of-type(6) {
          color: rgba(112, 226, 240, 0.8);
          border-color: rgba(112, 226, 240, 0.8);
        }
        &-item:hover {
          cursor: pointer;
        }
        &-item:nth-of-type(1):hover {
          background-color: rgba(255, 174, 224, 0.2);
        }
        &-item:nth-of-type(2):hover {
          background-color: rgba(255, 185, 255, 0.2);
        }
        &-item:nth-of-type(3):hover {
          background-color: rgba(229, 201, 255, 0.2);
        }
        &-item:nth-of-type(4):hover {
          background-color: rgba(202, 215, 255, 0.2);
        }
        &-item:nth-of-type(5):hover {
          background-color: rgba(153, 240, 255, 0.2);
        }
        &-item:nth-of-type(6):hover {
          background-color: rgba(112, 226, 240, 0.2);
        }
      }
    }
    &-viewer-container {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    &-thumbnail {
      width: 200px;
      height: 200px;
      border: 4px solid rgba(40, 49, 66, 0.6);
      position: absolute;
      left: 8px;
      bottom: 8px;
      background-color: #f5f5f5;
    }
  }
  .right-slider {
    min-width: 300px;
    max-width: 300px;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(180deg, #0c1a21 0%, #192c38 100%);
    &-special {
      padding: 12px 12px 16px;
      border-bottom: 1px solid #000;
      &-title {
        font-weight: 700;
        font-size: 14px;
        color: #ccc;
        margin-bottom: 4px;
      }
      &-text {
        font-weight: 400;
        font-size: 14px;
        color: #ccc;
      }
    }
    &-list {
      padding-bottom: 12px;
      &-title {
        font-weight: 700;
        font-size: 16px;
        color: #fff;
        padding-left: 12px;
      }
      &-content {
        font-weight: 400;
        font-size: 14px;
        color: #ccc;
        padding-top: 16px;
        overflow-y: auto;
        height: calc(100vh - 300px);
        .mjor-sign-input,
        .mjor-sign-select,
        .mjor-sign-cascader,
        .mjor-sign-radio,
        .mjor-sign-checkbox {
          display: block;
          margin-bottom: 0px;
          padding: 12px 12px 12px;
          border-bottom: 1px solid #000;
          :deep(.arco-form-item-label-col) {
            line-height: normal;
            .arco-form-item-label {
              font-weight: 400;
              font-size: 14px;
              color: #ccc;
              margin-bottom: 8px;
              white-space: nowrap;
              width: 250px;
              min-width: 250px;
              text-overflow: ellipsis;
              overflow: hidden;
            }
          }
          :deep(.arco-form-item-wrapper-col) {
            width: 100%;
            .arco-textarea-wrapper,
            .arco-select-view-single {
              background-color: transparent;
              border: 1px solid rgba(255, 255, 255, 0.7);
              border-radius: 4px;
              color: #fff;
              .arco-select-view-suffix {
                color: #fff;
              }
            }
            .arco-select-view-single:hover {
              .arco-select-view-icon {
                color: #fff;
              }
            }
            .arco-grid {
              gap: 16px 0px !important;
              // grid-template-columns: repeat(3, minmax(0px, 1fr));
              grid-template-columns: repeat(2, 50%) !important;
            }
            .arco-radio-label,
            .arco-checkbox-label {
              color: #ccc;
            }
            .arco-checkbox-group {
              width: 100%;
            }
          }
          :deep(.arco-checkbox-icon) {
            background-color: transparent;
            border: 1px solid #ccc;
          }
          :deep(.arco-checkbox-checked) {
            .arco-checkbox-icon {
              background-color: #67c9d5;
            }
          }
          :deep(.arco-icon-hover:hover::before) {
            background-color: transparent;
          }
          :deep(.arco-icon-hover:hover) {
            .arco-checkbox-icon {
              border: 1px solid #67c9d5;
            }
          }
          :deep(.arco-checkbox:hover) {
            .arco-checkbox-icon-hover::before {
              background-color: transparent;
            }
          }
        }
        .mjor-sign-input {
          :deep(.arco-form-item-wrapper-col) {
            .arco-form-item-content {
              min-height: 64px;
              .arco-textarea-wrapper {
                padding: 0;
                .arco-textarea {
                  min-height: 64px;
                }
              }
            }
          }
        }
        :deep(.arco-form) {
          .arco-radio-icon {
            width: 12px;
            height: 12px;
            line-height: 12px;
            border: 1px solid rgba(255, 255, 255, 0.7);
          }
          .arco-radio-icon::after {
            background-color: transparent;
          }
          .arco-radio:hover .arco-radio-icon {
            border-color: #67c9d5;
          }
          .arco-radio:hover .arco-radio-icon-hover::before {
            background-color: transparent;
          }
          .arco-radio-checked .arco-radio-icon {
            border: 1px solid #67c9d5;
            background-color: transparent;
          }
          .arco-radio-checked .arco-radio-icon::after {
            background-color: #67c9d5;
          }
        }
      }
    }
    &-list > div {
      padding-top: 12px;
    }
  }
}
</style>
<style lang="less">
.mark-scrap-dialog,
.submit-dialog,
.section-dialog {
  background-color: #272727;
  .arco-modal-header {
    height: 64px;
    background-color: #393a3c;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    border: 0;
    .arco-modal-title,
    .arco-modal-close-btn {
      font-weight: 700;
      font-size: 18px;
      color: #fff;
    }
    .arco-icon-hover:hover::before {
      background-color: #616367;
    }
  }
  .arco-modal-body {
    .radio-title {
      font-weight: 400;
      font-size: 16px;
      color: #fff;
      margin-bottom: 18px;
      text-align: left;
    }
    .radio-group {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .arco-radio-group {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        flex-wrap: wrap;
        .radio-group-item {
          margin-bottom: 12px;
          .arco-radio-label {
            white-space: nowrap;
          }
          // .arco-radio-icon{
          //     background-color: transparent;
          //     border: 1px solid rgba(255, 255, 255, 0.7);
          //     border-radius: 4px50%;
          //     color: #FFF;
          // }
          // .arco-radio-icon::after{
          //     background-color: transparent;
          // }
        }
      }
      .arco-radio-icon {
        width: 12px;
        height: 12px;
        line-height: 12px;
        border: 1px solid rgba(255, 255, 255, 0.7);
      }
      .arco-radio-icon::after {
        background-color: transparent;
      }
      .arco-radio:hover .arco-radio-icon {
        border-color: #67c9d5;
      }
      .arco-radio:hover .arco-radio-icon-hover::before {
        background-color: transparent;
      }
      .arco-radio-checked .arco-radio-icon {
        border: 1px solid #67c9d5;
        background-color: transparent;
      }
      .arco-radio-checked .arco-radio-icon::after {
        background-color: #67c9d5;
      }
      &-item {
        font-weight: 400;
        font-size: 14px;
        color: #ccc;
        .arco-radio-label {
          color: #ccc;
        }
      }
    }
    .other-container {
      margin: 4px 0 20px;
      width: 100%;
      height: 32px;
      .arco-textarea-wrapper {
        background-color: transparent;
        border: 1px solid rgba(255, 255, 255, 0.7);
        color: #fff;
      }
    }
    .submit-title {
      font-weight: 400;
      font-size: 22px;
      text-align: center;
      color: #fff;
      margin-bottom: 20px;
    }
    .submit-tip {
      font-weight: 400;
      font-size: 14px;
      text-align: center;
      color: #ccc;
    }
    .sumbit-body {
      margin-bottom: 32px;
    }
    .bottom-btn {
      .left-btn {
        margin-right: 18px;
      }
      button {
        width: 128px;
        height: 40px;
        background-color: #448e97;
        border-radius: 4px;
        font-weight: 400;
        font-size: 16px;
        color: #fff;
      }
      .arco-btn-primary:hover,
      .arco-btn-primary[type="button"]:hover {
        background-color: #67c9d5;
      }
    }
  }
  .arco-modal-footer {
    text-align: center;
    border: 0;
    .arco-btn {
      width: 96px;
      height: 40px;
      font-weight: 400;
      font-size: 16px;
      border-radius: 4px;
    }
    .arco-btn-secondary {
      color: rgba(255, 255, 255, 0.7);
      background-color: #353535;
    }
    .arco-btn-primary {
      background-color: #448e97;
      border-color: #448e97;
    }
    .arco-btn-primary:hover,
    .arco-btn-primary[type="button"]:hover {
      background-color: #67c9d5;
      border-color: #67c9d5;
    }
  }
}
.mark-scrap-dialog {
  .arco-modal-body {
    padding: 20px 32px;
  }
  .arco-modal-footer {
    padding: 0 20px 32px;
  }
}
.submit-dialog {
  .arco-modal-footer {
    .arco-btn {
      width: 128px !important;
    }
  }
}
.mark-tool-dropdown {
  .arco-dropdown {
    padding: 1px;
    background-color: #353e44;
    border: 0;
    border-radius: 2px;
    .arco-dropdown-list {
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      max-width: 540px;
    }
    .arco-dropdown-option {
      width: 106px;
      height: 26px;
      line-height: 26px;
      font-weight: 400;
      font-size: 12px;
      color: #ccc;
      padding: 0;
      margin: 1px;
      background: #414b52;
      div:nth-of-type(2) {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        min-width: 80px;
        width: 80px;
      }
    }
    .drop-item {
      justify-content: flex-start;
      padding-left: 4px;
      .arco-dropdown-option-content {
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }
      &-color {
        width: 10px;
        height: 10px;
        margin-right: 4px;
        margin-top: 2px;
      }
    }
    .arco-dropdown-option-active,
    .arco-dropdown-option:not(.arco-dropdown-option-disabled):hover {
      background: #5c6871;
      text-decoration: none;
      color: #13fffb;
    }
  }
}
.arco-select-dropdown {
  padding: 0;
  border: 0;
  background-color: #42484c;
  .arco-select-option {
    background-color: #42484c;
    color: #fff;
    font-weight: 400;
    font-size: 14px;
  }
  .arco-select-option-active {
    color: #67c9d5;
    font-weight: 400;
    font-size: 14px;
    background-color: #42484c;
  }
  .arco-select-option:not(.arco-select-dropdown .arco-select-option-disabled):hover {
    background-color: #5c6871;
    color: #fff;
  }
}
</style>
